<template>
  <div>
    <div class="pipe">
      <h3>最佳匹配</h3>
      <router-link :to="`singer/${artists.id}`">
        <div class="box">
          <img :src="`${artists.img1v1Url}`" />
          <h4>歌手:{{ artists.name }}</h4>
        </div>
      </router-link>
    </div>
    <loading v-if="result.length == 0"></loading>
    <div v-else class="musiclist">
      <music-list
        v-if="result"
        @play="$emit('play', $event)"
        :keywords="keywords"
        :songlist="result"
      ></music-list>
    </div>
    <loading v-if="isloading"></loading>
    <div ref="bottomb" class="loadingmore" @click="getMore">
      {{ isMore ? "加载更多" : "已经到底了没有更多.." }}
    </div>
  </div>
</template>
<script>
import MusicList from "@/components/MusicList.vue";
import _ from "lodash";
export default {
  props: {
    keywords: String,
  },
  singer: {
    type: String,
    default: "",
  },
  data() {
    return {
      result: [],
      page: 1,
      limit: 20,
      isloading: false,
      isMore: true,
      artists: [],
    };
  },
  created() {
    this.axios
      .get(`/search?keywords=${this.keywords}&type=100`)
      .then((result) => {
        this.artists = result.artists[0];
        // console.log(result.artists[0]);
      });
    this.getResult();
    window.addEventListener("scroll", this.windowScroll);
  },
  methods: {
    async getResult() {
      let offset = (this.page - 1) * this.limit;
      await this.axios
        .get(
          `/cloudsearch?keywords=${this.keywords}&limit=${this.limit}&offset=${offset}`
        )
        .then((result) => {
          if (result.songCount == 0) {
            this.isloading = false;
            this.isMore = false;
            return;
          }
          let re = result.songs.map((v) => {
            v.song = {
              privilege: v.privilege,
              artists: v.ar,
              album: v.al,
            };
            return v;
          });
          this.result = this.result.concat(re);
          this.isloading = false;
        });
    },
    getMore() {
      this.isloading = true;
      this.page++;
      this.getResult();
      // this.getResult()=false;
    },
    windowScroll: _.debounce(function () {
      if (window.innerHeight + window.scrollY > this.$refs.bottomb.offsetTop) {
        this.getMore();
        // console.log("触底加载");
      }
    }, 300),
  },
  components: {
    MusicList,
  },
};
</script>
<style scoped lang="less">
.pipe {
  width: 100%;
  border-bottom: 2px solid var(--cy-Color);
  h3 {
    height: 16px;
    font-size: 12px;
    color: #666;
  }
  .box {
    padding: 5px;
    height: 55px;
    display: flex;
    justify-content: space-between;
    img {
      display: block;
      width: 55px;
      height: 55px;
    }
    h4 {
      padding-right: 10px;
      width: 70%;
      padding-bottom: 20px;
      line-height: 55px;
      color: #333;
      font-size: 15px;
    }
  }
}
.loadingmore {
  line-height: 50px;
  text-align: center;
  padding-bottom: 40px;
}
</style>